<template>
  <div id="sign-box">
    <div class="padding-box">
      <div class="close-icon"><svg t="1612002036751" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1992" width="20" height="20"><path d="M846.005097 957.24155c-28.587082 0-57.174164-10.911514-78.996169-32.733519L96.632851 254.131955c-43.644009-43.644009-43.644009-114.348328 0-157.992337s114.348328-43.644009 157.992337 0L925.001265 766.515694c43.644009 43.644009 43.644009 114.348328 0 157.992337C903.17926 946.330036 874.592179 957.24155 846.005097 957.24155z" p-id="1993" fill="#ffffff"></path><path d="M175.62902 957.24155c-28.587082 0-57.174164-10.911514-78.996169-32.733519-43.644009-43.644009-43.644009-114.348328 0-157.992337L767.008928 96.139617c43.644009-43.644009 114.348328-43.644009 157.992337 0s43.644009 114.348328 0 157.992337L254.625188 924.508032C232.803183 946.330036 204.216101 957.24155 175.62902 957.24155z" p-id="1994" fill="#ffffff"></path></svg></div>
      <div class="in-box"><p>{{$t('m.joinUs')}}</p></div>
      <div class="log-sign">
        <div class="log-sign-box">
          <div class="log-sign-box">
            <p class="logIn">{{$t('m.logIn')}}</p>
            <p class="signUp" id="signUp" >{{$t('m.signUp')}}</p>
          </div>
        </div>
      </div>
      <form id="username-password-sign" :model="signUpForm">
        <div >
          <p>*{{$t('m.username')}}</p>
          <input v-model="signUpForm.username" type="text" class="input-100" id="username-sign"  minlength="4" maxlength="24" spellcheck ='false' oninput = " value=value.replace(/[^\w]/ig,'')">
        </div>
        <div class="paddingTop-30">
          <p>*{{$t('m.nickname')}}</p>
          <input v-model="signUpForm.nickname" type="text" id="nickname-sign" class="input-100"  minlength="3" maxlength="8" spellcheck ='false'>
        </div>
        <div class="paddingTop-30">
          <p>*{{$t('m.password')}}</p>
          <input v-model="signUpForm.password" type="password" id="password-sign" minlength="8" maxlength="72" class="input-100" spellcheck ='false' oninput = " value=value.replace(/[^\w]/ig,'')"/>
          <span class="warning paddingTop-5 animate__animated animate__fadeIn" id="passwordError">{{$t('m.pwdError')}}</span>
        </div>
        <div  class="paddingTop-30">
          <p>*{{$t('m.rePassword')}}</p>
          <input type="password" id="password-sign-ag" minlength="8" maxlength="72" class="input-100" spellcheck = 'false' oninput = " value=value.replace(/[^\w]/ig,'')">
          <span class="warning paddingTop-5 animate__animated animate__fadeIn" id="passwordAgError">{{$t('m.pwdErrorAg')}}</span>
        </div>
<!--        <div id="birth" class="paddingTop-30">-->
<!--          <p>{{$t('m.birth')}}</p>-->
<!--            <label class="line line-between">-->
<!--              <input tabindex="0" type="text" class="input-25" :placeholder="$t('m.yearForInput')" id="yearInput" spellcheck = 'false' maxlength="4" oninput = " value=value.replace(/[^\d]/g,'').replace(/^0/g,'')" >-->
<!--              <input type="text" readonly="readonly" id="monthInput" class="input-40 input-add x-openIcon"  :placeholder="$t('m.monthForInput')" spellcheck ='false'>-->
<!--              <input type="text" class="input-25" :placeholder="$t('m.dayForInput')" spellcheck = 'false'  maxlength="2" id="dayInput" oninput = " value=value.replace(/[^\d]/g,'')">-->
<!--            </label>-->
<!--          <span class="warning paddingTop-5 animate__animated animate__fadeIn" id="yearError">{{$t('m.yearError')}}</span>-->
<!--          <div id="chose">-->
<!--            <div id="choseBox" class="boxShadow-white scroll">-->
<!--              <ul id="monthChose" >-->
<!--                <li>{{$t('m.January')}}</li><li>{{$t('m.February')}}</li><li>{{$t('m.March')}}</li><li>{{$t('m.April')}}</li><li>{{$t('m.May')}}</li><li>{{$t('m.June')}}</li>-->
<!--                <li>{{$t('m.July')}}</li><li>{{$t('m.August')}}</li><li>{{$t('m.September')}}</li><li>{{$t('m.October')}}</li><li>{{$t('m.November')}}</li><li>{{$t('m.December')}}</li>-->
<!--              </ul>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
        <div  class="paddingTop-30">
          <p>{{$t('m.email')}}</p>
          <label>
            <input v-model="signUpForm.email" id="email-sign" type="email" class="input-100" spellcheck = 'false' >
          </label>
        </div>
      </form>
      <div id="sign-button">
        <button class="button" @click="signUp">{{$t('m.signUp')}}</button>
      </div>
    </div>
  </div>
</template>

<script>
  import { debounce } from '../static/js/debounce'
  import '../static/js/date'
  import $ from 'jquery'


  export default {
    name: 'signUp',
    data(){
      return {
        signUpForm:{
          // userId:'',
          username: '',
          password:'',
          nickname:'',
          email:'',
        }

      }
    },
    mounted() {
      $(function(){
        $('#password-sign').keyup(function(){
          let passwordSign =  $("#password-sign").val();
          let passwordSignAg =  $("#password-sign-ag").val();
          if(passwordSign.length <8){
            $('#passwordError').css('display','block');
            return false;
          }else{
            $('#passwordError').css('display','none');
            if(passwordSign!==passwordSignAg){
              // $('#passwordAgError').css('display','block');
              return false;
            }else{
              $('#passwordAgError').css('display','none');
              return true;
            }
          }
        })
      });
      //判断两次密码的一致性
      $(function(){
        $('#password-sign-ag').keyup(function(){
          if($('#password-sign').val()!==$('#password-sign-ag').val()){
            $('#passwordAgError').css('display','block');
            return false;
          }else{
            $('#passwordAgError').css('display','none');
            return true;
          }
        })
      });
      // 点击事件显示，再次点击空白隐藏
      $(function(){
        $('#monthInput').click(function(){
          $('#chose').toggle();
          return false;
        });
        $('#chose').click(function(){
          return false;
        });
        $(document).click(function(){
          $('#chose').hide();
        });
      });

    },

    methods:{
      async signUp(){
        const username = $("#username-sign").val()
        const password = $("#password-sign").val()
        const rePassword = $("#password-sign-ag").val()
        const nickname = $("#nickname-sign").val()
        const email = $("#email-sign").val()
        if(username !== '' && password !== '' && rePassword !== '' && nickname !== ''){
          const {data:res} = await this.$axios.post('v1/judgeUsername',{username: username})
          const {data:_res} = await this.$axios.post('v1/judgeNickname',{nickname: nickname})
          if(res.code === 200){
            this.$message.warning("账号已存在")
            return false
          }else if(_res.code === 200){
            this.$message.warning("昵称已存在")
            return false
          }else if(password.length >= 8 && password === rePassword){
            const {data:res} = await this.$axios.post("v1/signUp", this.signUpForm);
            if(res.flag === 'success'){
              this.$message.success("注册成功")
              location.reload();
            }
          }
        }else {
          this.$message.warning("标有*的必须填写")
        }
      },
    }
  }
</script>

<style scoped>
</style>
